<template>
	<view class="register-container">
		<view class="content-box">
			<!-- 户主信息 -->
			<view class="section">
				<view class="section-title">户主信息</view>

				<view class="form-item">
					<view class="required">*</view>
					<view class="label">姓名</view>
					<input type="text" v-model="formData.person_name" placeholder="请输入真实姓名" />
				</view>

				<view class="form-item arrow">
					<view class="required">*</view>
					<view class="label">性别</view>
					<picker mode="selector" :range="sexOptions" @change="onsexChange">
						<view class="picker-text">{{ formData.sex || '请选择性别' }}</view>
					</picker>
				</view>

				<view class="form-item arrow">
					<view class="required">*</view>
					<view class="label">出生日期</view>
					<picker mode="date" @change="onBirthdayChange">
						<view class="picker-text">{{ formData.birthday || '请选择出生日期' }}</view>
					</picker>
				</view>

				<view class="form-item">
					<view class="required">*</view>
					<view class="label">身份证</view>
					<input type="text" v-model="formData.identification" placeholder="请输入身份证号码" />
				</view>

				<view class="form-item arrow">
					<view class="required">*</view>
					<view class="label">政治面貌</view>
					<picker mode="selector" :range="politicsOptions" @change="onPoliticalChange">
						<view class="picker-text">{{ formData.politics || '请选择' }}</view>
					</picker>
				</view>

				<view class="form-item">
					<view class="required">*</view>
					<view class="label">手机号码</view>
					<view v-if="formData.phone">
						{{formData.phone}}
					</view>
					<button v-else class="getPhoneButton" @click="handleFastLogin" open-type="getPhoneNumber"
						@getphonenumber="handleUserClick">获取手机号</button>

				</view>

				<view class="form-item">
					<view class="required">*</view>
					<view class="label">密码</view>
					<input type="text" v-model="formData.password" placeholder="请输入密码" />
				</view>
			</view>

			<!-- 户籍地址 -->
			<view class="section">
				<view class="section-title">现住地址</view>

				<view class="form-item arrow">
					<view class="required">*</view>
					<view class="label">省市区</view>
					<picker mode="region" @change="onRegisteredRegionChange">
						<view class="picker-text">{{ formData.domicile|| '请选择省市区' }}</view>
					</picker>
				</view>

				<view class="form-item">
					<view class="required">*</view>
					<view class="label">详细地址</view>
					<input type="text" v-model="formData.address" placeholder="详细地址，如：门牌号、单元等" />
				</view>
			</view>

			<!-- 现住地址 -->
			<!-- <view class="section">
				<view class="section-title">现住地址</view>

				<view class="form-item arrow">
					<view class="required">*</view>
					<view class="label">省市区</view>
					<picker mode="region" @change="onCurrentRegionChange">
						<view class="picker-text">{{ formData.currentAddress.region || '请选择省市区' }}</view>
					</picker>
				</view>

				<view class="form-item">
					<view class="required">*</view>
					<view class="label">详细地址</view>
					<input type="text" v-model="formData.currentAddress.detail" placeholder="详细地址，如：门牌号、单元等" />
				</view>
			</view> -->

			<!-- 注册按钮 -->
			<button class="register-btn" @click="register">注册</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		request
	} from "../../js/util.js";

	const formData = ref({
		person_name: '',
		sex: '',
		birthday: '',
		identification: '',
		politics: '',
		phone: '',
		domicile: "",
		address: "",
		registeredAddress: {
			region: '',
			detail: ''
		},
		currentAddress: {
			region: '',
			detail: ''
		}
	})

	const sexOptions = ['男', '女']
	const politicsOptions = ['群众', '党员', '团员', '其他']

	const onsexChange = (e) => {
		formData.value.sex = sexOptions[e.detail.value]
	}

	const onBirthdayChange = (e) => {
		formData.value.birthday = e.detail.value
	}

	const onPoliticalChange = (e) => {
		formData.value.politics = politicsOptions[e.detail.value]
	}

	const onRegisteredRegionChange = (e) => {
		formData.value.domicile = e.detail.value.join(' ')
	}

	const onCurrentRegionChange = (e) => {
		formData.value.currentAddress.region = e.detail.value.join(' ')
	}

	// Add validation methods
	const validateForm = () => {
		// Validate name
		if (!formData.value.person_name.trim()) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
			return false
		}

		// Validate phone (11 digits)
		if (!/^1[3-9]\d{9}$/.test(formData.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号码',
				icon: 'none'
			})
			return false
		}

		// Validate ID card (18 digits)
		if (!/^\d{17}[\dX]$/.test(formData.value.identification)) {
			uni.showToast({
				title: '请输入正确的身份证号码',
				icon: 'none'
			})
			return false
		}

		// Validate password (minimum 6 characters)
		if (!formData.value.password || formData.value.password.length < 6) {
			uni.showToast({
				title: '密码长度至少6位',
				icon: 'none'
			})
			return false
		}
		// console.log(!formData.value.sex , !formData.value.birthday, !formData.value.politics ,
		// 	!formData.value.address , !formData.value.currentAddress.region,
		// 	!formData.value.currentAddress.detail)
		// Add other required field validations
		if (!formData.value.sex || !formData.value.birthday || !formData.value.politics ||
			!formData.value.address) {
			uni.showToast({
				title: '请填写所有必填项',
				icon: 'none'
			})
			return false
		}

		return true
	}

	const register = async () => {
		// Add validation check before registration
		if (!validateForm()) {
			return
		}

		const getOpenId = await request("getOpenId");
		if (getOpenId.status) {
			let submitData = {
				openid: getOpenId.result,
				...formData.value,
				address: formData.domicile + formData.address
			}
			delete submitData.currentAddress
			delete submitData.registeredAddress
			const res = await request("addUser", submitData)
			console.log('register :>> ', res);
			if (res.status) {
				uni.setStorageSync("userInfo", {
					role: "user", // 或其他角色
				});
				uni.$emit("updateTabbar");
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				})
				uni.setStorageSync('userid', res.result._id)
				uni.setStorageSync('phone', submitData.phone)
				uni.switchTab({
					url: '/pages/home/home'
				})
			} else {
				uni.showToast({
					title: res.result.message || '注册失败',
					icon: 'none'
				})
			}
		}

	}

	async function handleUserClick(e) {
		if (e.detail.code) {
			let submitData = {
				cloudID: e.detail.cloudID,
			};
			const data = await request("getPhone", submitData);
			console.log("handleUserClick", data);
			if (data.status) {
				formData.value.phone = data.result.data.phoneNumber;
			} else {
				uni.showToast({
					title: "获取失败"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.register-container {
		padding: 0 30rpx;

		.content-box {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx 10rpx;
			margin-top: 20rpx;
		}

		.section {
			margin-bottom: 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx 15rpx;

			.section-title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.form-item {
				display: flex;
				align-items: center;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #eee;

				.getPhoneButton {
					font-size: 24rpx;
					padding: 5rpx 30rpx;
					margin-right: 0;
					border: none;
				}

				.required {
					color: #ff0000;
					margin-right: 0;
					width: 20rpx;
				}

				.label {
					width: 150rpx;
					font-size: 28rpx;
				}

				input {
					flex: 1;
					font-size: 28rpx;
					color: #999;
				}

				picker {
					flex: 1;
				}

				.picker-text {
					font-size: 28rpx;
					color: #999;
				}

				&.arrow {
					position: relative;

					&::after {
						content: '';
						width: 16rpx;
						height: 16rpx;
						border-top: 4rpx solid #999;
						border-right: 4rpx solid #999;
						transform: rotate(45deg);
						position: absolute;
						right: 20rpx;
						top: 50%;
						margin-top: -8rpx;
					}
				}
			}
		}

		.register-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background-color: #ff4d4f;
			color: #fff;
			border-radius: 44rpx;
			margin-top: 60rpx;
			font-size: 32rpx;
			margin-bottom: 30rpx;
		}
	}
</style>